<%@ page pageEncoding="utf-8" %>
<%@include file="/commons/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<fmt:bundle basename="res">
<head>
    <meta charset="utf-8">
    <title><fmt:message key='xzfxs'/></title>
    <jsp:include page="/WEB-INF/commons/commons-header.jsp" flush="true"/>
    <style>
        html {
            background: #fff;
        }
    </style>
</head>

<body>


<div class="layui-container">

    <div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 20px 30px 0 0;">

        <form:form commandName="distributor" method="post">

            <div class="layui-form-item">
                <label class="layui-form-label"><fmt:message key='xzzdhy'/></label>
                <div class="layui-input-block">
                    <input type="button" class="layui-btn select-user-btn" value="<fmt:message key='xzhy'/>">
                    <form:hidden path="userIds"/>
                    <table class="layui-table user-table">
                        <tr>
                            <th><fmt:message key='hyid'/></th>
                            <th><fmt:message key='hymc'/></th>
                            <th><fmt:message key='hysjh'/></th>
                            <th><fmt:message key='cz'/></th>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span style="color: red;">*</span><fmt:message key='fxsdj'/></label>
                <div class="layui-input-inline">
                    <select name="level.id">
                        <option value=""><fmt:message key='qxz'/></option>
                        <c:forEach items="${levels}" var="item">
                            <option value="${item.id}">${item.name}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label"><span style="color: red;">*</span><fmt:message key='kqfxsd'/></label>
                <div class="layui-input-inline" style="width: 70%">
                    <input type="radio" name="microShop" value="true" title="开启" checked>
                    <input type="radio" name="microShop" value="false" title="禁用">
                </div>
            </div>

            <div class="layui-form-item layui-hide">
                <label class="layui-form-label"></label>
                <div class="layui-input-inline">
                    <input type="button" value="确定" id="submit" lay-filter="submit" lay-submit class="layui-btn">
                </div>
            </div>
        </form:form>
    </div>
</div>


<script>

    layui.use(['form', 'layer'], function () {
        var layer = layui.layer;

        $(".select-user-btn").click(function () {
            layer.open({
                type: 2,
                content: "${web_domain}/distributor/selectUser",
                area: ["90%", "90%"],
                btn: ["<fmt:message key='qd1'/>", "<fmt:message key='qx'/>"],
                yes: function (index, layero) {
                    var users = layero.find('iframe').contents().find("input.feijin-check:checked");
                    users.each(function (index, item) {
                        var id = item.getAttribute("data-id");
                        if ($("#" + id).length === 0) {
                            var name = item.getAttribute("data-name");
                            var mobile = item.getAttribute("data-mobile");
                            $(".user-table").append('<tr id="' + id + '"><td>' + id + '</td><td>' + name + '</td><td>' + mobile + '</td><td><input type="button" class="layui-btn layui-btn-danger layui-btn-xs remove-user" data-id="' + id + '" value="<fmt:message key='sc'/>"></td></tr>');
                        }
                    });
                    layer.close(index);
                }
            });
        });

        $("body").on("click", ".remove-user", function () {
            $(this).parent().parent().remove();
        });

        $("#submit").click(function () {

            var ids = [];
            $(".user-table tr").each(function (index, item) {
                if (item.id) {
                    ids.push(item.id);
                }
            });
            if (ids.length === 0) {
                layer.msg("<fmt:message key='qxzhy'/>");
                return;
            }
            $("#userIds").val(ids.join(";"));

            $("#distributor").ajaxSubmit({
                success: function (res) {
                    if (res.status) {
                        layer.alert("<fmt:message key='tjcg'/>", function () {
                            parent.location.reload();
                        });
                    } else {
                        layer.alert(res.message);
                    }
                }
            });
        });
    });
</script>
</body>
</fmt:bundle>
</html>